<template>
  <div class="">watch监听</div>
</template>

<script>
import { watchEffect, watch, ref, reactive } from "vue";
import { onBeforeRouteLeave } from 'vue-router';
export default {

  setup() {
   onBeforeRouteLeave((to,from) => {
      console.log('轻轻的我走了');
   })





    // const count = ref(0);
    // const age = ref(10);
    // let num = 30
    // watchEffect(() => {
    //   // console.log('dfghjk');
    //   // console.log(count.value);
    //   // console.log(age.value);
    //   console.log(num);
    // })
    // setTimeout(() => {
    //   count.value++
    //   age.value++
    //   num++
    // },1000)

    // const data = reactive({ num: 0 });
    // watchEffect(() => {
    //   console.log(data.num); // 这里的值会被打印两次，0，1
    //   // console.log(data); // 这里的对象只会被打印一次
    // });
    // setTimeout(() => {
    //   data.num++;
    // }, 1000);

    // watch 可以有三个参数
    // 第一个参数 要监听的对象或者是函数，第二个参数回调函数，第三个参数，控制对象
    // const count = ref(0);
    // watch(count,(newVal, oldVal) => {
    //   console.log(newVal); // 1
    //   console.log(oldVal); // 0
    // },{immediate:true,deep:true});
    // // immediate 第一次就监听
    // // deep 深度监听
    // setTimeout(() => {
    //   // count.value++;
    //   // -> logs 1
    // }, 1000);

    //   const data = reactive({
    //     num: 0,
    //     arr: [0]
    //   });

    //   // const arr = ref([0]);

    //   watch(() => data.arr,
    //     (newVal, oldVal) => {
    //       console.log(newVal); // 1
    //       console.log(oldVal); // 0
    //     },{
    //       deep:true
    //     }
    //   );
    //   setTimeout(() => {
    //     data.num++;
    //     data.arr[0]++;
    //     // -> logs 1
    //   }, 1000);

    const num = ref(0);
    const number = ref(20);
    watch([num, number], ([newNum, newNumber], [oldNum, oldNumber]) => {
      console.log(newNum, oldNum); // 打印 1 0
      console.log(newNumber, oldNumber); // 打印 21 20
    });

    setTimeout(() => {
      // num.value++;
      number.value++;
    }, 1000);
  },
};
</script>
<style lang="scss" scoped>
</style>
